<style lang="scss" scoped>
  .a4page {
    background-color: white;
    //border: 1px solid #E6E6E6;
  }
  @media print {
    .hidden {
      diplay:none;
    }
    @page {
      size:auto;
      margin:5mm 5mm 5mm 5mm;
    }
    .ivu-btn {
      display: none;
    }
  }
</style>
<template>
  <div class="a4page" :style="finalStyle">
      <slot></slot>
  </div>
</template>

<script>
export default {
  name: "aFourPage",
  props:{
    direction:{
      default:()=>{
        return 'vertical'
      }
    },
    width:{
      default:()=>{
        return 1400
      }
    },
    marginTop:{
      default:()=>{
        return 10
      }
    },

    marginBottom:{
      default:()=>{
        return 10
      }
    },
    marginLeft:{
      default:()=>{
        return 10
      }
    },
    marginRight:{
      default:()=>{
        return 10
      }
    },
  },
  computed:{
    finalStyle(){
      if(this.direction==='vertical'){
        let inSide={
          width:this.width+'px',
          height:this.width*1.415+'px',
          paddingLeft:this.marginLeft+'px',
          paddingRight:this.marginRight+'px',
          paddingTop:this.marginTop+'px',
          paddingBottom:this.marginBottom+'px',
        };
        return inSide;
      }else{
        let inSide={
          width:this.width+'px',
          height:this.width/1.415+'px',
          paddingLeft:this.marginLeft+'px',
          paddingRight:this.marginRight+'px',
          paddingTop:this.marginTop+'px',
          paddingBottom:this.marginBottom+'px',
        };
        return inSide
      }
    }
  }
}
</script>